<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>v-for练习</title>
    <script src="../../js/vue.js"></script>
</head>
<style>
    #app {
        margin: 5rem auto;
        width: 50%;
    }
    
    table {
        width: 100%;
    }
    
    table,
    tr,
    td,
    th {
        border: 1px solid gray;
        border-collapse: collapse;
        text-align: center;
    }
    
    td,
    th {
        padding: 0.5rem;
    }
    
    tr:nth-child(2) {
        border-top: 1.5px solid gray;
    }
    
    p {
        font-size: 1.5rem;
    }
</style>

<body>
    <div id="app">
        <form>
            <!-- 当id一样或name输入框为空时,锁定id输入框 -->
            <!-- :disabled="g_name =='' || searchId" -->
            <p>编号: <input type="text"  v-model="g_id"> 名称: <input type="text" v-model="g_name"> <input type="button" value="入库" :disabled="btn" value="入库" @click="add"></p>
        </form>
        <table>
            <tr>
                <th>编号</th>
                <th>游戏名称</th>
                <th>入库时间</th>
                <th>操作</th>
            </tr>
            <tr v-for="(item,index) in games">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.date}}</td>
                <td><span @click="edits(item)">修改</span>|<span @click="deletes(index)">删除</span></td>
            </tr>

        </table>
    </div>
    <script>
        var v_app = new Vue({
            el: "#app",
            data: {
                g_id: "",
                g_name: "",
                games: [{
                    id: "gx001",
                    name: "《圣兽之王》",
                    date: "2024-04-20",
                }, {
                    id: "gx002",
                    name: "《星露谷物语》",
                    date: "2024-04-21",
                }, {
                    id: "gx003",
                    name: "《2042》",
                    date: "2024-04-21",
                }, {
                    id: "gx004",
                    name: "《女神异闻录5》",
                    date: "2024-04-24",
                }, {
                    id: "gx005",
                    name: "《植物大战僵尸》",
                    date: "2024-04-24",
                }],
            },
            methods: {
                deletes(index) {
                    this.games.splice(index, 1);


                },
                add() {
                    let t_id = this.g_id;
                    let t_name = this.g_name;
                    if (this.searchId) {
                        for (let i = 0; i < this.games.length; i++) {
                            if (this.games[i].id == this.g_id) {
                                this.games[i].id = t_id;
                                this.games[i].name = t_name;
                                this.games[i].date = this.getDate();
                            }
                        }
                    } else {
                        let newGame = {
                            id: t_id,
                            name: t_name,
                            date: this.getDate(),
                        };
                        this.games.push(newGame);
                    };
                    this.g_id = "";
                    this.g_name = "";
                },
                edits(item) {
                    this.g_id = item.id;
                    this.g_name = item.name;
                },
                getDate() {
                    let time = new Date();
                    let year = time.getFullYear();
                    let month = time.getMonth() + 1;
                    let day = time.getDate();
                    if(month<10){
                        month = "0"+month;
                    }
                    if(day<10){
                        day = "0"+day;
                    }
                    return year + "-" + month + "-" + day;
                },
            },
            computed: {
                searchId() {
                    return this.games.some((item)=>{
                        return item.id == this.g_id;
                    })
                    // for (let i = 0; i < this.games.length; i++) {
                    //     if (this.games[i].id == this.g_id) {
                    //         return true;
                    //     }
                    // }
                    // return false;
                },
                btn() {
                    if (this.g_name != '' && this.g_id != '') {
                        if (this.searchId) {
                            return this.games.some((item)=>{
                                return item.id == this.g_id && item.name == this.g_name;
                            })
                            // for (let i = 0; i < this.games.length; i++) {
                            //     if (this.games[i].id == this.g_id && this.games[i].name == this.g_name) {
                            //         return true;
                            //     }
                            // }
                            // return false;
                        }
                        return false;
                    }
                    return true;
                },
            },
        });
    </script>
</body>

</html>